Component({
  properties: {
    dropDownMenuTitle: {
      type: Array,
      value: [],
    },
    dropDownMenuDistrictData: {
      type: Array,
      value: [],
      observer: function(newVal, oldVal) {
        let model = newVal[0] ? newVal[0] : null
        this.selectDefaltDistrictLeft(model)
      }
    },

    dropDownMenuSourceData: {
      type: Array,
      value: []
    },
    dropDownMenuStyleData: {
      type: Array,
      value: []
    },
    dropDownMenuFilterData: {
      type: Array,
      value: []
    },
  },
  data: {
    // private properity
    district_open: false, // 经营区域
    source_open: false, // 业态
    // style_open: false, // 出租 出售
    filteropen: false, // 排序
    shownavindex: '',
    dropDownMenuDistrictDataRight: {},
    district_left_select: '',
    district_right_select: '',
    district_right_select_name: '',
    selected_style_id: 0,
    selected_style_name: '',
    selected_source_id: 0,
    selected_source_name: '',
    selected_filter_id: 0,
    selected_filter_name: ''
  },
  methods: {

    tapDistrictNav: function(e) {
      if (this.data.district_open) {
        this.setData({
          district_open: false,
          source_open: false,
          style_open: false,
          filter_open: false,
          shownavindex: 0
        })
      } else {
        this.setData({
          district_open: true,
          style_open: false,
          source_open: false,
          filter_open: false,
          shownavindex: e.currentTarget.dataset.nav
        })
      }

    },
    tapSourceNav: function(e) {
      if (this.data.source_open) {
        this.setData({
          source_open: false,
          style_open: false,
          district_open: false,
          filter_open: false,
          shownavindex: 0
        })
      } else {
        this.setData({
          source_open: true,
          style_open: false,
          district_open: false,
          filter_open: false,
          shownavindex: e.currentTarget.dataset.nav
        })
      }
    },
    tapStyleNav: function(e) {
      if (this.data.style_open) {
        this.setData({
          source_open: false,
          style_open: false,
          district_open: false,
          filter_open: false,
          shownavindex: 0
        })
      } else {
        this.setData({
          source_open: false,
          style_open: true,
          filter_open: false,
          district_open: false,
          shownavindex: e.currentTarget.dataset.nav
        })
      }
      // console.log(e.target)
    },
    tapFilterNav: function(e) {
      if (this.data.filter_open) {
        this.setData({
          source_open: false,
          style_open: false,
          district_open: false,
          filter_open: false,
          shownavindex: 0
        })
      } else {
        this.setData({
          source_open: false,
          style_open: false,
          district_open: false,
          filter_open: true,
          shownavindex: e.currentTarget.dataset.nav
        })
      }
    },


    selectDefaltDistrictLeft(model) {
      if (!model) {
        return
      }
      var model = model.childModel;
      var selectedId = model.id
      var selectedTitle = model.title;
      this.setData({
        dropDownMenuDistrictDataRight: model ? model : '',
        district_left_select: selectedId,
        district_right_select: '',
      })
    },

    selectDistrictLeft: function(e) {
      var model = e.target.dataset.model.childModel;
      var selectedId = e.target.dataset.model.id
      var selectedTitle = e.target.dataset.model.title;
      this.setData({
        dropDownMenuDistrictDataRight: model ? model : '',
        district_left_select: selectedId,
        district_right_select: '',
      })
    },

    selectDistrictRight: function(e) {
      var selectedId = e.target.dataset.model.id
      var selectedTitle = e.target.dataset.model.title;
      this.closeHyFilter();
      this.setData({
        district_right_select: selectedId,
        district_right_select_name: selectedTitle
      })
      this.triggerEvent("selectedItem", {
        index: this.data.shownavindex,
        selectedId: selectedId,
        selectedTitle: selectedTitle
      })
    },

    selectSourceItem: function(e) {
      var selectedId = e.target.dataset.model.id
      var selectedTitle = e.target.dataset.model.title;
      this.closeHyFilter();
      this.setData({
        selected_source_id: selectedId,
        selected_source_name: selectedTitle
      })
      this.triggerEvent("selectedItem", {
        index: this.data.shownavindex,
        selectedId: selectedId,
        selectedTitle: selectedTitle
      })
    },

    selectFilterItem: function(e) {
      var selectedId = e.target.dataset.model.id
      var selectedTitle = e.target.dataset.model.title;
      this.closeHyFilter();
      this.setData({
        selected_filter_id: selectedId,
        selected_filter_name: selectedTitle
      })
      this.triggerEvent("selectedItem", {
        index: this.data.shownavindex,
        selectedId: selectedId,
        selectedTitle: selectedTitle
      })
    },

    selectStyleItem: function(e) {
      var selectedId = e.target.dataset.model.id
      var selectedTitle = e.target.dataset.model.title;
      this.closeHyFilter();
      this.setData({
        selected_style_id: selectedId,
        selected_style_name: selectedTitle
      })
      this.triggerEvent("selectedItem", {
        index: this.data.shownavindex,
        selectedId: selectedId,
        selectedTitle: selectedTitle
      })
    },

    /**关闭筛选 */
    closeHyFilter: function() {
      if (this.data.district_open) {
        this.setData({
          district_open: false,
          source_open: false,
          style_open: false,
          filter_open: false,
        })
      } else if (this.data.source_open) {
        this.setData({
          source_open: false,
          style_open: false,
          district_open: false,
          filter_open: false,
        })
      } else if (this.data.style_open) {
        this.setData({
          source_open: false,
          style_open: false,
          district_open: false,
          filter_open: false,
        })
      } else if (this.data.filter_open) {
        this.setData({
          source_open: false,
          style_open: false,
          district_open: false,
          filter_open: false,
        })
      }
    },
  },
  //组件生命周期函数，在组件实例进入页面节点树时执行
  attached: function() {


  },

})





/**   JS 数组结构：
  dropDownMenuTitle: ['经营区域', '经营业态', '排序'],
  
    //可展开二级菜单
    data1: [{
        id: 9,
        title: '全部',
        childModel: [{
            id: '10',
            title: '全部'
          }
        ]
      },
      {
        id: 2,
        title: '商业极中心-北馆',
        childModel: [{
            id: '8-1',
            title: '北馆G1'
          },
          {
            id: '8-2',
            title: '北馆F1'
					}
					,
          {
            id: '1-3',
            title: '北馆F2'
          }
        ]
      },
      {
        id: 2,
        title: '商业极中心-南馆',
        childModel: [{
            id: '2-1',
            title: '南馆G1'
          },
          {
            id: '2-2',
            title: '南馆F1'
					}
					,
          {
            id: '2-2',
            title: '南馆F2'
					}
					,
          {
            id: '2-2',
            title: '南馆F3'
          }
        ]
      },
      {
        id: 3,
        title: '绿荫格兰大道步行街区',
        childModel: [{
            id: '3-1',
            title: '步行街G1'
          },
          {
            id: '3-2',
            title: '步行街F1'
          }
        ]
      }
    ],

    //一级菜单
    data2: [
      {
        id: 1,
        title: '全部'
      },
      {
        id: 2,
        title: '餐饮'
      },
      {
        id: 3,
        title: '百货'
			},
      {
        id: 4,
        title: '女装'
      },
      {
        id: 5,
        title: '男装'
      },
      {
        id: 6,
        title: '母婴童装'
      },
      {
        id: 7,
        title: '儿童娱乐'
			}
			,
      {
        id: 8,
        title: '休闲'
			}
			,
      {
        id: 9,
        title: '超市'
      }
    ],
    
    //一级菜单
    data3: [{     
        id: 1,
        title: '默认排序'
      },
      {
        id: 2,
        title: '首字母A-X'
      }
    ],

 

 



 */